<template>
	<view>
     <view v-if="cart.length === 0" class="empty-box">
        <image src="../../static/images/cart_empty@2x.png"  mode="heightFix"></image>
        	<view class="empty-text">空空如也</view>
      </view>
      <view v-else  >
            <!-- 收货地址组件 -->
            <my-addres></my-addres>
            <!-- 购物车主体 -->
              <view class="cart-title">
                <!-- 左侧的图标 -->
                <uni-icons type="shop" size="18"></uni-icons>
                <!-- 描述文本 -->
                <text class="cart-title-text">购物车</text>
              </view>
              <!-- 列表 -->
              <view class="list">
                <uni-swipe-action>
                   <block v-for="(goods, i) in cart" :key="i">
                   <uni-swipe-action-item @click="()=> bindClick(goods)" :right-options="options">
                         <my-goods @radioChange='radioChange' @numberChange='numberChange' :showNumber='true' :showRadio='true' :goods="goods"></my-goods>
                      </uni-swipe-action-item>
                    </block>
                </uni-swipe-action>
              </view>
              <view class="naverB">
              <my-settle></my-settle>
              </view>
      </view>
		</view>
</template>

<script>
// 导入封装的mixins混入(添加tabBar角标)
import TabBarM from '@/mixins/tabbar-badge.js'
import { mapState,mapMutations } from 'vuex'
	export default {
    mixins:[TabBarM],
    data(){
      return{
        options:[
             {
               text: '删除',
               style: {
               backgroundColor: '#c00000'
            }
          }
        ]
      }
    },
    computed:{
      ...mapState('m_cart',['cart'])
    },
    methods:{
      // 获取状态位修改的Vuex方法
      ...mapMutations('m_cart',['updateGoodsState']),
      ...mapMutations('m_cart',['updateGoodsNumber']),
      ...mapMutations('m_cart',['undateRemoveGoods']),
      // 获取组件传来的勾选框数据
      radioChange(data){
        // 在Vuex中修改商品选中状态位
       this.updateGoodsState(data)
      },
      // 获取组件传来的计数器数据
      numberChange(data){
        // 在Vuex中修改商品选中数量
       this.updateGoodsNumber(data)
      },
      // 滑动删除购物车商品功能
      bindClick(goods){
        console.log(goods)
        this.undateRemoveGoods(goods)
      }
    }
	}
</script>

<style lang="scss">
.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  .cart-title-text {
    margin-left: 10px;
  }
}
.goods-item-left {
  margin-right: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .goods-pic {
    width: 100px;
    height: 100px;
    display: block;
  }
}
.naverB{
     width: 100%;
     position: fixed;
     bottom: 0;
}
	.empty-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 160px;
		
		.empty-img {
			width: 60px;
			height: 60px;
		}
		
		.empty-text {
			margin-top: 10px;
			font-size: 12px;
			color: gray;
		}
	}
  .list{
    margin-bottom: 50px;
  }
</style>
